<template>
  <div class="ezuikit-js">
    <div id="video-container" ref="viewtools"></div>
  </div>
</template>

<script>
import EZUIKit from "ezuikit-js";
var player = null;
export default {
  name: "EZUIKitJs",
  props: {
    //播放器模板
    type: {
      type: String,
      default: "simple",
    },
    //头部自定义功能组件
    headerList: {
      type: Array,
      default: [],
    },
    //尾部自定义功能组件
    footerList: {
      type: Array,
      default: [],
    },
    //accessToken
    accessToken: {
      type: String,
      default: "",
    },
    //设备ID
    deviceSerial: {
      type: String,
      default: "",
    },
    //通道号
    channelNo: {
      type: String,
      default: "",
    },
    //初始化是否高清
    isHd: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    accessToken: {
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            this.getInitVideoPlayer();
          });
        }
      },
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    //初始化视频
    getInitVideoPlayer() {
      let divW = this.$refs.viewtools.clientWidth;
      let divH = this.$refs.viewtools.clientHeight;
      //判断初始化视频高清还是标清
      let ezuikit = "";
      if (this.isHd) {
        ezuikit = `${this.channelNo}.hd.live`;
      } else {
        ezuikit = `${this.channelNo}.live`;
      }
      player = new EZUIKit.EZUIKitPlayer({
        id: "video-container", // 视频容器ID
        accessToken: this.accessToken,
        url: `ezopen://open.ys7.com/${this.deviceSerial}/${ezuikit}`,
        // simple - 极简版; pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
        width: divW,
        height: divH,
        templete: this.type,
        themeData: {
          autoFocus: 5,
          poster:
            "https://resource.eziot.com/group1/M00/00/89/CtwQEmLl8r-AZU7wAAETKlvgerU237.png",
          header: {
            color: "#1890ff",
            activeColor: "#FFFFFF",
            backgroundColor: "#000000",
            btnList: this.headerList,
          },
          footer: {
            color: "#FFFFFF",
            activeColor: "#1890FF",
            backgroundColor: "#00000021",
            btnList: this.footerList,
          },
        },
      });
      window.player = player;
    },
  },
  beforeDestroy() {
    player.stop();
  },
};
</script>

<style lang="less" scoped>
.ezuikit-js {
  height: 100%;
  width: 100%;
  #video-container {
    height: 100%;
    width: 100%;
  }
}
</style>
